<template>
  <button :loading="loading" style="margin: 30px 0;" @click="touchRunAni">
    {{ loading ? 'LOADING...' : 'Start Animation' }}
  </button>  
  <div class="container">
    <div v-for="num of nums" :id="`num-${num}`" :key="num">
      {{ num }}
    </div>
  </div>
</template>


<script lang="ts">


import { defineComponent, markRaw, onMounted, onUnmounted, onUpdated, reactive, ref, SetupContext } from 'vue';
import useD3LinkedList from '@/hooks/useD3LinkedList';
import { createAnimationTask } from '@/lib/y-animation';


const useAniTest = () => {
  let nums = ref([17, 7, 3, 5, 3, 1, 7, 7, 3]);
  let time = 0;
  let loading = ref(false);
  const ids: number[] = [];

  const runAniTest = () => {
    const animationTask = createAnimationTask();
    loading.value = true
    nums.value.forEach(num => {
      animationTask.createAni(
        {
          styleName: 'translateY',
          domID: `num-${num}`,
          to: (num % 17)*30,
          eventTime: 3000,
        },
        {
          from: -200,
          delay: (num % 17) * 500,
        }
      );
    });
    setTimeout(() => {
      nums.value.forEach(num => {
        ids.push(animationTask.createAni(
        {
          styleName: 'translateY',
          domID: `num-${num}`,
          to: (num % 17)*10 + 800,
          eventTime: 3000,
        },
        {
          from: (num % 17)*30,
          delay: (num % 17) * 500,
          callback: () => {
            !animationTask.hasRun(ids) && (loading.value = false);

            console.log(num, loading.value)
          }
        }));
      });
    }, 8000);
  };

  const touchRunAni = () => {
    if ( !loading.value ) {
      console.log('run')
      ++time;

      nums.value = nums.value.map(num => Math.round(num * (1 + 2*Math.random())));
      setTimeout(() => runAniTest(), 1000);
    } 
  }

  return {
    nums,
    loading,
    touchRunAni,
  }
}


export default defineComponent({ components: { },
setup(props: any, context: SetupContext ) {

  // useD3LinkedList('d3-container', [1,2,4,5,6,7,13,53,2, 530]);
  // let { loading, touchRunAni } = useAniTest();

  

  onMounted(()=>{

  })

  return {
    ...useAniTest()
  };
},
}); 

</script>

<style scoped>

.container {
  width: 1000px;
  height: 800px;
  border: 10px solid #555;
  font-size: 66px;
  overflow: hidden;
}

.container div {
  padding: 30px;
  display: inline-block;
  transform: translateY(-500px);
  width: 50px;
}

</style>